{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.
    - button_label: button label.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif 
  -%}
  
  <div class="card-wrapper underline-links-hover">
    <div class="card
      card-product-media-wrapper
      card--standard
      {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
      style="--ratio-percent: 100%;"
    >
    {% liquid
      assign redirect_url = card_product.url
      if card_product.metafields.custom.page_url != blank
        assign redirect_url =  card_product.metafields.custom.page_url
      endif
    %}
      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
        {%- if card_product.featured_media -%}
          <div class="card__media">
            <div class="media media--transparent media--hover-effect">
              <a href="{{ redirect_url }}" id="media-CardLink-{{ section_id }}-{{ card_product.id }}">
                <img
                  srcset="{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w"
                  src="{{ card_product.featured_media | image_url: width: 533 }}"
                  alt="{{ card_product.featured_media.alt | escape }}"
                  class="motion-reduce card-product-image"
                  {% unless lazy_load == false %}loading="lazy"{% endunless %}
                  width="{{ card_product.featured_media.width }}"
                  height="{{ card_product.featured_media.height }}"
                >
                {%- if card_product.media[1] != nil and show_secondary_image -%}
                <img
                  srcset="{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w"
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  alt=""
                  class="motion-reduce card-product-image"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
                {%- endif -%}
              </a>
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__badge {{ settings.badge_position_for_card }}">
            {%- if card_product.available == false -%}
              <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge__sale badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
            {%- endif -%}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"{% if card_product.featured_media or settings.card_style == 'card' %} id="title-{{ section_id }}-{{ card_product.id }}"{% endif %}>
            <a href="{{ redirect_url }}" id="CardLink-{{ section_id }}-{{ card_product.id }}" class="full-unstyled-link" aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}">
              {{ card_product.title | escape }}
            </a>
          </h3>
          <div class="card__desc">
            {{ card_product.metafields.custom.collection_desc }}
          </div>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>
            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}">
                <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}</span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
              </p>
            {%- endif -%}

            <div class="loox-rating" data-id="{{ card_product.id }}" data-rating="{{ card_product.metafields.loox.avg_rating }}" data-raters="{{ card_product.metafields.loox.num_reviews }}"></div>
            <div class="price-wrapper">
              {% render 'price', product: card_product, price_class: '', price_type: 'compare_last' %}
            </div>
            <div class="varanits-wrapper">
              <collections-variant-radios class="no-js-hidden" data-id="{{ card_product.id }}" data-section="{{ section.id }}" data-url="{{ redirect_url }}" {{ block.shopify_attributes }}>
                {%- for option in card_product.options_with_values -%}
                  {%- assign file_extension = 'png' -%}
                  {%- assign color_label = 'Color,Kleur,color,Colour,Couleur,colore,Colore,Farbe,farbe,색,色,färg,farve' | split: ',' -%}
                  {%- assign size_label = 'Size,Maat,Dimensioni,Taille,Größe,Tamaño' | split: ',' -%}
                  {% if color_label  contains  option.name %}                               
                    <fieldset class="js product-form__input color">
                      {%- for value in option.values -%}
                        <input
                          type="radio"
                          id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}-{{ card_product.id }}"
                          name="{{ option.name }}-{{ card_product.id }}"
                          value="{{ value | escape }}"
                          form="{{ product_form_id }}"
                          {% if option.selected_value == value %}checked{% endif %}
                        >
                        <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}-{{ card_product.id }}">
                          <img loading="lazy" class="cs_img" src="{{ value | handle | append: '.' | append: file_extension | asset_url  }}" width="33" height="33" alt="tenways_ebike" />
                        </label>
                      {%- endfor -%}
                    </fieldset> 
                  {% endif %}
                {% endfor %}
                <script type="application/json" id="product-cart-{{card_product.id}}">
                  {{ card_product.variants | json }}
                </script>
                <script>
                  window.PRODUCT_MEDIAS_{{ card_product.id }} = [];
                  {%- for product_media in card_product.media -%}
                    window.PRODUCT_MEDIAS_{{ card_product.id }}.push({
                      srcset: `{%- if product_media.width >= 165 -%}{{ product_media | image_url: width: 165 }} 165w,{%- endif -%}
                            {%- if product_media.width >= 360 -%}{{ product_media | image_url: width: 360 }} 360w,{%- endif -%}
                            {%- if product_media.width >= 533 -%}{{ product_media | image_url: width: 533 }} 533w,{%- endif -%}
                            {%- if product_media.width >= 720 -%}{{ product_media | image_url: width: 720 }} 720w,{%- endif -%}
                            {%- if product_media.width >= 940 -%}{{ product_media | image_url: width: 940 }} 940w,{%- endif -%}
                            {%- if product_media.width >= 1066 -%}{{ product_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                            {{ product_media | image_url }} {{ product_media.width }}w`,
                      src: `{{ product_media | image_url: width: 533 }}`,
                      sizes: `(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)`,
                      alt: `{{product_media.alt}}`,
                      class: `motion-reduce card-product-image`,
                      loading: `lazy`,
                      width: `{{ product_media.width }}`,
                      height: `{{ product_media.height }}`
                    })
                    var image = new Image();
                    image.src = '{{ product_media | image_url: width: 533 }}';
                  {% endfor %}
                </script>
                <a class="learn-more-button" href="{{ redirect_url }}">
                  {{ button_label }}
                  <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 0.500002L4.5 4M1 7.5L3.33333 5.4" stroke="white" stroke-width="0.933333" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </collections-variant-radios>
            </div>
          </div>
        </div>
        {%- if show_quick_add -%}
          <div class="quick-add">
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            <product-form>
              {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                <input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}" disabled>
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  aria-live="polite"
                  data-sold-out-message="true"
                  {% if card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                >
                  <span>
                    {%- if card_product.selected_or_first_available_variant.available -%}
                      {{ 'products.product.add_to_cart' | t }}
                    {%- else -%}
                      {{ 'products.product.sold_out' | t }}
                    {%- endif -%}
                  </span>
                  <span class="sold-out-message hidden">
                    {{ 'products.product.sold_out' | t }}
                  </span>
                  <div class="loading-overlay__spinner hidden">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                    </svg>
                  </div>
                </button>
              {%- endform -%}
            </product-form>
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
{%- else -%}
  <div class="card-wrapper underline-links-hover">
    <div class="card
      card--{{ settings.card_style }}
      card--text
      {% if extend_height %} card--extend-height{% endif %}
      {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}"
      style="--ratio-percent: 100%;"
    >
      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: 100%;">
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a role="link" aria-disabled="true" class="full-unstyled-link">
                {{ 'onboarding.product_title' | t }}
              </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price' %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}
